<template>
    <div>
        <el-row>
            <el-col v-for="item in state.list" :key="item.id" :span="5" :offset="1" class="card-col"
                @click="toGoodsInfo(item)">
                <el-card :body-style="{ padding: '0px' }">
                    <img :src="item.goodsPicture" class="image" />
                    <div style="padding: 14px">
                        <span>{{ item.goodsName }}</span>
                        <div class="bottom">
                            <div>
                                <span v-html="item.goodsDesc"></span>
                                <span style="font-size: x-small;">销量：{{ item.goodsSales }}</span>
                            </div>
                            <span class="prize" style="color: red;">￥{{ item.goodsPrize }}</span><br><br>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import api from '@/api'

const route = useRoute()

const pageHelper = reactive({
    id: '',
    goodsName: route.params.goodsName,
    total: 10, // 总数据量
    pageSize: 100, // 每页显示的数据数量
    currentPage: 1, // 当前页码
    goodsTypeId: Number(route.params.id)
})

router.beforeEach((to, from, next) => {
    // 获取新的goodsTypeId
    const goodsTypeId = Number(to.params.id)
    const goodsName = to.params.goodsName
    // 更新pageHelper的goodsTypeId
    pageHelper.goodsTypeId = goodsTypeId
    pageHelper.goodsName = goodsName
    handleCurrentChange(1);
    next()
})

const state = reactive({
    list: [] as any
})

onMounted(() => {
    // 页面加载完成后自动触发查询，假设初始页码为 1
    handleCurrentChange(1);
});


const onSubmit = () => {
    handleCurrentChange(pageHelper.currentPage)
}

function handleCurrentChange(page: number): void {
    // 更新页码
    pageHelper.currentPage = page;
    // 在这里可以根据当前页码，请求对应的数据
    // 例如：fetchData(page);
    // 发送 Axios 请求
    api.goods.getGoodsList({
        id: pageHelper.id,
        pageNum: page,
        goodsName: pageHelper.goodsName,
        pageSize: pageHelper.pageSize,
        goodsTypeId: pageHelper.goodsTypeId
    })
        .then(response => {
            // 请求成功，处理返回的数据
            // 更新数据
            pageHelper.total = response.data.data.total;
            state.list = response.data.data.list;
            // 其他操作...
        })
        .catch(error => {
            // 请求失败，处理错误信息
            console.error(error);
        });
}

const toGoodsInfo = (item: any) => {
    router.push({
        name: 'goodsinfo',
        params: {
            id: item.id,
            goodsName: item.goodsName,
            goodsPrize: item.goodsPrize,
            goodsDesc: item.goodsDesc,
            goodsPicture: item.goodsPicture,
            goodsReleaseTime: item.goodsReleaseTime,
            goodsTypeId: item.goodsTypeId,
            goodsType: item.goodsType
        }
    })
};

</script>
  
  
<style scoped>
.bottom {
    margin-top: 13px;
    line-height: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 102px;
}

.prize {
    margin-left: 10px;
    min-height: auto;
    font-size: 16px;
}

.image {
    width: 100%;
    display: block;
}

.card-col {
    margin-bottom: 30px;
}
</style>